<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="music" :model="music" label-width="120px" v-loading.fullscreen.lock="fullscreen">
                <el-form-item label="音乐名称">
                    <el-input v-model="music.name"></el-input>
                </el-form-item>
                <el-form-item label="歌手名称">
                    <el-input v-model="music.singer"></el-input>
                </el-form-item>
                <el-form-item label="歌曲时长">
                    <el-input v-model="music.duration" placeholder="格式为 04:30"></el-input>
                </el-form-item>
                <el-form-item label="歌曲封面">
                    <el-upload class="avatar-uploader" :data="pic" :action="getLocation" v-loading.fullscreen.lock="fullscreenLoading" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="music.img" :src="ip+music.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸: 300*300像素</span>
                </el-form-item>
                <el-form-item label="上传音频文件">
                    <el-upload :file-list="filelist" :data="music_zip" :limit="limit" :action="get_music_location" list-type="picture" v-loading.fullscreen.lock="fullscreenLoading" :on-success="list_handleAvatarSuccess" :on-remove="zip_remove" :before-upload="beforeAvatarUpload_zip">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="正文内容">
                    <quill-editor v-model="music.lyrics" :options="editorOption" ref="myEdit"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add('music')">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, ip, movie_location } from '../../utils/local.js'
import { editMusic } from '../../api/server.js'
import { mapState } from 'vuex'

export default {
    data() {
        return {
            fullscreen: false,
            fullscreenLoading: false,
            getLocation: pic_location,
            pic: {},
            music_zip: {},
            filelist: [],
            limit: 1,
            get_music_location: movie_location,
            ip: ip,
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'indent': '-1' }, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                    ]
                },
            }
        }
    },
    created() {
        let music = this.music
        if (music.music) {
            let obj = {}
            obj.name = music.music_name
            obj.url = music.music
            this.filelist.push(obj)
        }


    },
    computed: mapState({
        music: state => state.Third.music
    }),
    methods: {
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.fullscreenLoading = false
                this.music.img = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            this.pic.pictureFile = file
            this.pic.width = 300 * 3
            this.pic.height = 300 * 3
            return this.upload(file)
        },
        beforeAvatarUpload1(file) {
            this.pic1.pictureFile = file
            return this.upload(file)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        add(from) {
            let music = this.music
            music.music = this.filelist[0].url
            music.music_name = this.filelist[0].name
            editMusic(music)
                .then(res => {
                    this.$message.success('修改成功')
                })
        },
        list_handleAvatarSuccess(res) {
            if (res.code === '000000') {
                let obj = {}
                obj.name = res.result.fileName
                obj.url = res.result.filePath
                this.filelist.push(obj)
                this.fullscreenLoading = false
            }
        },
        pic_remove(file, filelist) {
            this.filelist = filelist
        },
        back() {
            this.$router.go(-1)
        },
        zip_remove(file, filelist) {
            this.filelist = []
        },
        beforeAvatarUpload_zip(file) {
            this.music_zip.movieFile = file
            return this.upload(this.music_zip)
        }
    },
    // mounted() {
    //     let quill = this.$refs.myEdit.quill
    //     let array = quill.options.modules.toolbar.container
    //     array.pop()
    //     this.$refs.myEdit.quill.options.modules.toolbar.container = array
    // }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.avatar-uploader {
  width: 300px;
  height: 300px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 300px;
  display: block;
}
.tips {
  color: gray;
  margin-left: 8%;
}
</style>
